import "./index.less"
import LinearProgress from '@mui/material/LinearProgress'
import { Button } from "@mui/material"
import { useNavigate } from "react-router-dom";

// 组件内部的 props 的类型，写在自己内部一般就够了
interface IProp {
    data : ISubject;
}

// 如果有图片是需要时才加载，不建议写 import 导入使用，而是直接使用require让其需要时才加载
export default function SubjectItem({data} : IProp) {
    const nav = useNavigate()
  return (
    <div className="item">
        <section className="pic">
            <img src={require("@/assets/images/home/subject.png")} alt="" />
        </section>
        <section className="detail">
            <h4>{data.title}</h4>
            <p>0/{data.itemCount}题</p>
            <LinearProgress variant="determinate" value={0} />
        </section>
        <section className="opt">
            <Button variant="contained" onClick={()=>nav('/select/'+data.actionCode)}>练习</Button>
        </section>
    </div>
  )
}
